<template>
    <el-card>
        <template #header>
            <div>
                <el-form ref="searchFormRef" :model="searchForm" label-width="120px">
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="路线id">
                                <el-input-number v-model="searchForm.routeId" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="车次">
                                <el-input v-model="searchForm.trainNumber" placeholder="支持模糊搜索" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="列车id">
                                <el-input-number v-model="searchForm.trainId" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="列车类型">
                                <el-select v-model="searchForm.trainType" placeholder="请选择" clearable>
                                    <el-option label="普通" value="0" />
                                    <el-option label="特快" value="1" />
                                    <el-option label="全选" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="始发站城市">
                                <el-input v-model="searchForm.startStationCity" placeholder="支持模糊搜索" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="始发站名称">
                                <el-input v-model="searchForm.startStationName" placeholder="支持模糊搜索" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="是否中转">
                                <el-select v-model="searchForm.transferChoice" placeholder="请选择" clearable>
                                    <el-option label="全选" value="0" />
                                    <el-option label="中转" value="1" />
                                    <el-option label="不中转" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="中转站城市">
                                <el-input v-model="searchForm.transferStationCity" placeholder="支持模糊搜索" clearable :disabled="isTransfer"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="中转站名称">
                                <el-input v-model="searchForm.transferStationName" placeholder="支持模糊搜索" clearable :disabled="isTransfer"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="终点站城市">
                                <el-input v-model="searchForm.endStationCity" placeholder="支持模糊搜索" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="终点站名称">
                                <el-input v-model="searchForm.endStationName" placeholder="支持模糊搜索" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出发时间开始">
                                <el-date-picker v-model="searchForm.startStationStartTimeStart" type="datetime"
                                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出发时间结束">
                                <el-date-picker v-model="searchForm.startStationStartTimeEnd" type="datetime"
                                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="到达时间开始">
                                <el-date-picker v-model="searchForm.endStationEndTimeStart" type="datetime"
                                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="到达时间结束">
                                <el-date-picker v-model="searchForm.endStationEndTimeEnd" type="datetime"
                                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商务座数量最少">
                                <el-input-number v-model="searchForm.businessNumStart" :min="0" :step="4"step-strictly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商务座数量最多">
                                <el-input-number v-model="searchForm.businessNumEnd" :min="0" :step="4" step-strictly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="普通座数量最少">
                                <el-input-number v-model="searchForm.commonNumStart" :min="0" :step="6" step-strictly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="普通座数量最多">
                                <el-input-number v-model="searchForm.commonNumEnd" :min="0" :step="6" step-strictly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商务座票价最少">
                                <el-input-number v-model="searchForm.businessPriceStart" :min="0" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商务座票价最多">
                                <el-input-number v-model="searchForm.businessPriceEnd" :min="0" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="普通座票价最少">
                                <el-input-number v-model="searchForm.commonPriceStart" :min="0" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="普通座票价最多">
                                <el-input-number v-model="searchForm.commonPriceEnd" :min="0"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="路线状态">
                                <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                                    <el-option label="禁用" value="0" />
                                    <el-option label="启用" value="1" />
                                    <el-option label="维修" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        </el-row>
                    <el-row>
                        <el-col style="margin-left: 950px;">
                            <el-button type="primary" @click="clearSearchForm">清空</el-button>
                            <el-button type="primary" @click="loadDataList">查询</el-button>
                            <el-button type="primary"
                                @click="router.push({ name: 'routeCreateOrUpdate' })">新增</el-button>
                                <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </template>
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <!-- 表单列插槽插入 -->
            <!-- 路线id -->
            <template #slotRouteId="{index,row}">
                {{ row.routeId }}
            </template>
            <!-- 车次 -->
            <template #slotTrainNumber="{index,row}">
                {{ row.trainNumber }}
            </template>
            <!-- 列车id -->
            <template #slotTrainId="{index,row}">
                {{ row.trainId }}
            </template>
            <!-- 列车类型 -->
            <template #slotTrainType="{index,row}">
                {{ row.trainType==0?'普通':'特快' }}
            </template>
            <!--出发站城市-->>
            <template #slotStartStationCity="{index,row}">
                {{ row.startStationCity }}
            </template>
            <!--出发站名称-->>
            <template #slotStartStationName="{index,row}">
                {{ row.startStationName }}
            </template>
            <!--中转站城市-->>
            <template #slotTransferStationCity="{index,row}">
                {{ row.transferStationCity }}
            </template>
            <!--中转站名称-->>
            <template #slotTransferStationName="{index,row}">
                {{ row.transferStationName }}
            </template>
            <!--终点站城市-->>
            <template #slotEndStationCity="{index,row}">
                {{ row.endStationCity }}
            </template>
            <!--终点站名称-->>
            <template #slotEndStationName="{index,row}">
                {{ row.endStationName }}
            </template>
            <!-- 始发站出发时间 -->
            <template #slotStartStationStartTime="{index,row}">
                {{ row.startStationStartTime }}
            </template>
            <!-- 中转站到达时间 -->
            <template #slotTransferStationEndTime="{index,row}">
                {{ row.transferStationEndTime }}
            </template>
            <!-- 中转站出发时间 -->
            <template #slotTransferStationStartTime="{index,row}">
                {{ row.transferStationStartTime }}
            </template>
            <!-- 终点站到达时间 -->
            <template #slotEndStationEndTime="{index,row}">
                {{ row.endStationEndTime }}
            </template>
            <!-- 商务座行数起始 -->
            <template #slotBusinessRowStart="{index,row}">
                {{ row.businessRowStart }}
            </template>
            <!-- 商务座行数结束 -->
            <template #slotBusinessRowEnd="{index,row}">
                {{ row.businessRowEnd }}
            </template>
            <!-- 普通座行数起始 -->
            <template #slotCommonRowStart="{index,row}">
                {{ row.commonRowStart }}
            </template>
            <!-- 普通座行数结束 -->
            <template #slotCommonRowEnd="{index,row}">
                {{ row.commonRowEnd }}
            </template>
            <!-- 商务座价格 -->
            <template #slotBusinessPrice="{index,row}">
                {{ row.businessPrice }}
            </template>
            <!-- 普通座价格 -->
            <template #slotCommonPrice="{index,row}">
                {{ row.commonPrice }}
            </template>
            <!-- 状态 -->
            <template #slotStatus="{index,row}">
                <div v-if="row.status===0" style="color: #F56C6C;">禁用</div>
                <div v-else-if="row.status===1" style="color: #67C23A;">启用</div>
                <div v-else-if="row.status===2" style="color: #E6A23C;">维修</div>
            </template>
            <!-- 操作 -->
            <template #slotOperation="{index,row}">
                <el-link type="primary"
                    @click="router.push({name:'routeCreateOrUpdate',query:{row:JSON.stringify(row)}})"
                    style="margin-right: 20px">编辑</el-link>
                <el-link type="danger" @click="deleteRoute(row,true)">删除</el-link>
            </template>
        </Table>
    </el-card>
</template>

<script setup>
    import {ref,getCurrentInstance,onMounted,computed} from 'vue';
    import {useRouter} from 'vue-router';
    import Table from "@/components/Table.vue";

    const {proxy} = getCurrentInstance();
    // 路由
    const router = useRouter();
    // 表单样式
    const tableOptions = {
        showIndex: true,
        border: true,
    }
    // 表单
    const tableData = ref({});
    // 表单列
    const columns = [
        {
            label: "路线id",
            prop: "routeId",
            width: "100",
            scopedSlots: "slotRouteId",
            fixed: false,
        },
        {
            label: "车次",
            prop: "trainNumber",
            width: "150",
            scopedSlots: "slotTrainNumber",
            fixed: false,
        },
        {
            label: "列车id",
            prop: "trainId",
            width: "100",
            scopedSlots: "slotTrainId",
            fixed: false,
        },
        {
            label: "列车类型",
            prop: "trainType",
            width: "100",
            scopedSlots: "slotTrainType",
            fixed: false,
        },
        {
            label: "始发站城市",
            prop: "startStationCity",
            width: "300",
            scopedSlots: "slotStartStationCity",
            fixed: false,
        },
        {
            label: "始发站名称",
            prop: "startStationName",
            width: "300",
            scopedSlots: "slotStartStationName",
            fixed: false,
        },
        {
            label: "中转站城市",
            prop: "transferStationCity",
            width: "300",
            scopedSlots: "slotTransferStationCity",
            fixed: false,
        },
        {
            label: "中转站名称",
            prop: "transferStationName",
            width: "300",
            scopedSlots: "slotTransferStationName",
            fixed: false,
        },
        {
            label: "终点站城市",
            prop: "endStationCity",
            width: "300",
            scopedSlots: "slotEndStationCity",
            fixed: false,
        },
        {
            label: "终点站名称",
            prop: "endStationName",
            width: "300",
            scopedSlots: "slotEndStationName",
            fixed: false,
        },
        {
            label: "始发站出发时间",
            prop: "startStationStartTime",
            width: "200",
            scopedSlots: "slotStartStationStartTime",
            fixed: false,
        },
        {
            label: "中转站到达时间",
            prop: "transferStationEndTime",
            width: "200",
            scopedSlots: "slotTransferStationEndTime",
            fixed: false,
        },
        {
            label: "中转站出发时间",
            prop: "transferStationStartTime",
            width: "200",
            scopedSlots: "slotTransferStationStartTime",
            fixed: false,
        },
        {
            label: "终点站到达时间",
            prop: "endStationEndTime",
            width: "200",
            scopedSlots: "slotEndStationEndTime",
            fixed: false,
        },
        {
            label: "商务座行数起始",
            prop: "businessRowStart",
            width: "100",
            scopedSlots: "slotBusinessRowStart",
            fixed: false,
        },
        {
            label: "商务座行数结束",
            prop: "businessRowEnd",
            width: "100",
            scopedSlots: "slotBusinessRowEnd",
            fixed: false,
        },
        {
            label: "普通座行数起始",
            prop: "commonRowStart",
            width: "100",
            scopedSlots: "slotCommonRowStart",
            fixed: false,
        },
        {
            label: "普通座行数结束",
            prop: "commonRowEnd",
            width: "100",
            scopedSlots: "slotCommonRowEnd",
            fixed: false,
        },
        {
            label: "商务座价格/元",
            prop: "businessPrice",
            width: "150",
            scopedSlots: "slotBusinessPrice",
            fixed: false,
        },
        {
            label: "普通座价格/元",
            prop: "commonPrice",
            width: "150",
            scopedSlots: "slotCommonPrice",
            fixed: false,
        },
        {
            label: "状态",
            prop: "status",
            width: "150",
            scopedSlots: "slotStatus",
            fixed: false,
        },
        {
            label: "操作",
            prop: "operation",
            width: "200",
            scopedSlots: "slotOperation",
            fixed: "right",
        }
    ]
// 查询表单
const searchForm = ref({});

// 是否中转
const isTransfer = computed(() => {
     return searchForm.value.transferChoice==2;
})

/**
 * 获取数据
 */
const loadDataList = async ()=>{
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize,
    };
    Object.assign(params,searchForm.value);
    if(!params.startStationStartTimeStart || params.startStationStartTimeStart.length == 0){
        delete params.startStationStartTimeStart;
    }
    if(!params.startStationStartTimeEnd || params.startStationStartTimeEnd.length == 0){
        delete params.startStationStartTimeEnd;
    }
    if(!params.endStationEndTimeStart || params.endStationEndTimeStart.length == 0){
        delete params.endStationEndTimeStart;
    }
    if(!params.endStationEndTimeEnd || params.endStationEndTimeEnd.length == 0){
        delete params.endStationEndTimeEnd;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.loadRouteList,
        params: params,
    });
    if(!result){
        return;
    }
    Object.assign(tableData.value,result.data);
}
/**
 * 删除路线
 */
const deleteRoute = async (row,needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要删除路线吗？",
            okfun: ()=>deleteRoute(row,false)
        });
        return;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.deleteRoute,
        params: {
            routeId: row.routeId
        }
    });
    if(!result){
        return;
    }
    proxy.Message.success("删除成功");
    loadDataList();
}
/**
 * 清空搜索表单
 */
const clearSearchForm = ()=>{
    searchForm.value = {};
}
/**
 * 导出数据
 */
 const exportExcel = async (row,needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要导出数据吗？",
            okfun: ()=>exportExcel(row,false)
        });
        return;
    }
    const routeList = (tableData.value.list || []).map((item) => item);
    if (routeList.length === 0) {
        proxy.Message.warning("当前没有可导出的路线数据");
        return;
    }
    let result = await proxy.Request.requestJSON({
        url: proxy.Api.exportRouteExcel,
        params: routeList, 
        responseType: 'arraybuffer'
    });
    if(!result){
        return;
    }
    let blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
    const fileName = "路线数据excel.xlsx";
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        link.style.display = 'none';
        var href = URL.createObjectURL(blob);
        link.href = href;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(href);
    }
    proxy.Message.success("导出成功");
}
onMounted(()=>{
    loadDataList();
})

</script>

<style scoped>
.el-card {
    width: auto;
}

.el-form {
    .el-form-item {
        width: 300px;
    }
    .el-input-number{
        width: 180px;
    }
}
</style>